<template>
<div class="header-container">
    <div class="header" >           
            <div class="title">我的藏宝阁</div>
            <router-link to="/msg"><div class="icon-envelop"></div></router-link>
    </div>
    <div class="banner">
        <div>
            <div v-if="Userinfo.status" class="tx" :style="'background-image:url('+img+')'"></div>
            <div class="tx" v-else></div>
        </div>
        <div>
            <div v-if="Userinfo.status" class="username">{{username}}</div>
            <div class="login" v-else @click="login">登录</div>
        
        </div>
    </div>    
</div>
</template>
<script>

export default {
    name:'MineHeader',
    props:{
        Userinfo:Object
    },
    computed:{
        img(){
            var result="";
            if(this.Userinfo.data==null){
                return result;
            }
            else{
                return this.Userinfo.data.img
            }
        },
        username(){
            var result="";
            if(this.Userinfo.data==null){
                return result;
            }
            else{
                return this.Userinfo.data.username
            }
        }
    },
    methods:{
        login(){
             this.$router.push('/login')
        }
    }
    
}
</script>
<style lang="scss" scoped>
.header {
    position: fixed;
    top: 0;  
    z-index: 999;
    width: 100%;
    height: rem(130);
    min-width: 320px;
    max-width: 750px;
    background-color: #fff;
    .title{
        width: 100%;
        height: rem(130);
        line-height: rem(130);
        text-align: center;
        font-size: rem(45);
        font-weight: 700;
    }    
    .icon-envelop {
        position: absolute;
        top: rem(40);
        right: rem(40);
        width: rem(60);
        height: rem(60);
        background: url(../../../../assets/imgs/xinf.svg) no-repeat 50% 50%;
        background-size: auto 100%;
    }
}
.banner{
    position: relative;
    width: 100%;
    height: rem(850);
    background: url(../../../../assets/imgs/header-bg.jpg) no-repeat 100% 100%;
    background-size: cover;
    .tx{
        position: absolute;
        bottom: rem(250);
        left: 50%;
        margin-left: rem(-130);
        width: rem(260);
        height: rem(260);
        border-radius: 100%;
        background:url(../../../../assets/imgs/tx.png) no-repeat 100% 100%;
        background-size: 100% 100%;
        z-index: 100;
    }
    .login{
        position: absolute;
        bottom: rem(120);
        left: 50%;
        margin-left: rem(-100);
        width: rem(200);
        height: rem(90);
        line-height: rem(90);
        border-radius: rem(45);
        background-color: #e74e4b;
        font-size: rem(40);
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
    .username{
        position: absolute;
        bottom: rem(120);
        left: 50%;
        margin-left: rem(-200);
        width: rem(400);
        height: rem(90);
        line-height: rem(90);
        border-radius: rem(45);
        font-size: rem(50);
        color: #fff;
        text-align: center;
    }
}
    




</style>